<template>
  <div class="group-setting-container">
    <el-form 
      ref="groupFormRef" 
      :model="groupForm" 
      :rules="groupFormRules" 
      label-width="150px" 
      class="group-form"
    >
      <div class="form-row">
        <el-form-item label="集团名称" prop="name">
          <el-input v-model="groupForm.name" placeholder="请输入集团名称"></el-input>
        </el-form-item>
        <el-form-item label="集团简称" prop="shortName">
          <el-input v-model="groupForm.shortName" placeholder="请输入集团简称"></el-input>
        </el-form-item>
      </div>
      
      <div class="form-row">
        <el-form-item label="系统绑定手机" prop="systemPhone">
          <div class="phone-wrapper">
            <el-input v-model="groupForm.systemPhone" placeholder="请输入系统绑定手机号" disabled></el-input>
            <el-button type="primary" class="change-phone-btn" @click="showPhoneDialog">更改手机号</el-button>
          </div>
        </el-form-item>
      </div>
      
      <div class="form-row" style="width: 30%;">
        <el-form-item label="管理员" prop="admin" >
          <el-input v-model="groupForm.admin" disabled placeholder="请输入管理员账号"></el-input>
        </el-form-item>
      </div>
      
      <div class="form-row full-width">
        <el-form-item label="集团介绍" prop="introduction" class="full-width-item">
          <el-input 
            v-model="groupForm.introduction" 
            type="textarea" 
            :rows="8" 
            placeholder="请输入集团介绍">
          </el-input>
        </el-form-item>
      </div>
      
      <div class="form-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-form>
    
    <!-- 更改手机号弹窗 -->
    <el-dialog
      v-model="phoneDialogVisible"
      title="更改绑定手机"
      width="500px"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form 
        ref="phoneFormRef" 
        :model="phoneForm" 
        :rules="phoneFormRules" 
        label-width="120px" 
        class="phone-form"
      >
        <el-form-item label="新手机号" prop="newPhone">
          <el-input v-model="phoneForm.newPhone" placeholder="请输入新手机号"></el-input>
        </el-form-item>
        
        <el-form-item label="验证码" prop="verificationCode">
          <div class="verification-code-wrapper">
            <el-input v-model="phoneForm.verificationCode" placeholder="请输入验证码"></el-input>
            <el-button 
              type="primary" 
              class="send-code-btn" 
              :disabled="isSendingCode" 
              @click="sendVerificationCode"
            >
              {{ sendCodeBtnText }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="phoneDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updatePhoneNumber">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 表单引用
const groupFormRef = ref(null)

// 表单数据
const groupForm = reactive({
  name: '',
  shortName: '',
  systemPhone: '',
  admin: '',
  introduction: ''
})

// 表单校验规则
const groupFormRules = {
  name: [
    { required: true, message: '请输入集团名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  shortName: [
    { required: true, message: '请输入集团简称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  systemPhone: [
    { required: true, message: '请输入系统绑定手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  admin: [
    { required: true, message: '请输入管理员账号', trigger: 'blur' }
  ]
}

// 提交表单
const submitForm = async () => {
  if (!groupFormRef.value) return
  
  await groupFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 这里添加提交逻辑
      console.log('提交表单', groupForm)
      ElMessage.success('保存成功')
    } else {
      console.log('表单校验失败', fields)
      return false
    }
  })
}

// 获取集团信息
const fetchGroupInfo = () => {
  // 模拟获取集团数据
  const groupData = {
    name: '',
    shortName: '',
    systemPhone: '158****8958',
    admin: 'Adminstrators',
    introduction: ''
  }
  
  // 填充表单
  Object.assign(groupForm, groupData)
}

// 手机号变更相关
const phoneDialogVisible = ref(false)
const phoneFormRef = ref(null)
const phoneForm = reactive({
  newPhone: '',
  verificationCode: ''
})

// 手机号验证规则
const phoneFormRules = {
  newPhone: [
    { required: true, message: '请输入新手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
  ]
}

// 验证码发送相关
const countDown = ref(0)
const isSendingCode = ref(false)
let timer = null

// 发送验证码按钮文本
const sendCodeBtnText = computed(() => {
  if (countDown.value > 0) {
    return `重新发送(${countDown.value}s)`
  }
  return '发送验证码'
})

// 显示手机号修改弹窗
const showPhoneDialog = () => {
  phoneForm.newPhone = ''
  phoneForm.verificationCode = ''
  phoneDialogVisible.value = true
}

// 发送验证码
const sendVerificationCode = async () => {
  if (!phoneForm.newPhone) {
    ElMessage.warning('请先输入新手机号')
    return
  }
  
  // 验证手机号格式
  if (!/^1[3-9]\d{9}$/.test(phoneForm.newPhone)) {
    ElMessage.warning('请输入正确的手机号码')
    return
  }
  
  // 设置倒计时
  countDown.value = 60
  isSendingCode.value = true
  
  // 模拟发送验证码
  ElMessage.success(`验证码已发送至手机 ${phoneForm.newPhone}`)
  
  // 开始倒计时
  timer = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      clearInterval(timer)
      isSendingCode.value = false
    }
  }, 1000)
}

// 更新手机号
const updatePhoneNumber = async () => {
  if (!phoneFormRef.value) return
  
  await phoneFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 模拟更新手机号
      setTimeout(() => {
        // 手机号显示格式 158****8958
        const phonePrefix = phoneForm.newPhone.substring(0, 3)
        const phoneSuffix = phoneForm.newPhone.substring(7)
        groupForm.systemPhone = `${phonePrefix}****${phoneSuffix}`
        
        ElMessage.success('手机号更改成功')
        phoneDialogVisible.value = false
      }, 500)
    } else {
      console.log('表单校验失败', fields)
      return false
    }
  })
}

// 清除定时器
const clearTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

// 页面卸载时清除定时器
onMounted(() => {
  fetchGroupInfo()
})

// 组件卸载前清理资源
const onBeforeUnmount = () => {
  clearTimer()
}
</script>

<style lang="scss" scoped>
.group-setting-container {
  .group-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    
    .form-row {
      display: flex;
      margin-bottom: 20px;
      
      .el-form-item {
        flex: 1;
        margin-right: 20px;
        
        &:last-child {
          margin-right: 0;
        }
      }
      
      &.full-width {
        display: block;
        
        .full-width-item {
          width: 100%;
        }
      }
      
      .phone-wrapper {
        display: flex;
        align-items: center;
        
        .el-input {
          flex: 1;
        }
        
        .change-phone-btn {
          margin-left: 10px;
          white-space: nowrap;
        }
      }
    }
    
    .form-footer {
      margin-top: 30px;
      text-align: center;
    }
  }
  
  .phone-form {
    padding: 10px 20px;
    
    .verification-code-wrapper {
      display: flex;
      align-items: center;
      
      .el-input {
        flex: 1;
      }
      
      .send-code-btn {
        margin-left: 10px;
        white-space: nowrap;
      }
    }
  }
}
</style> 